<template>
	<view class="accountInfo">
		<u-form :model="dataForm" ref="uForm">
			<u-form-item label="账户性质" label-width='220' required>
				<u-radio-group v-model="dataForm.bank_account_type">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value"
						:disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="开户名称" label-width='220' prop="account_name" required>
				<u-input v-model="dataForm.account_name" input-align='right' placeholder="请输入开户名称" />
			</u-form-item>
			<u-form-item label="开户银行" label-width='220' prop="account_bank" required>
				<u-input v-model="dataForm.account_bank" input-align='right' @click='bankShow=true' type="select"
					placeholder="请输入开户银行" />
			</u-form-item>
			<u-form-item label="银行账号" label-width='220' prop="account_number" required>
				<u-input v-model="dataForm.account_number" input-align='right' placeholder="请输入银行账号" />
			</u-form-item>




			<u-form-item label="开户支行" label-width='280' prop="bank_name" v-if="dataForm.account_bank =='其他银行'" required>
				<u-input v-model="dataForm.bank_name" input-align='right' placeholder="必须是银行全称" />
			</u-form-item>


			<u-form-item label="开户地区" v-if="sumbitShow" label-width='280' prop="bank_address_code" required>
				<u-input v-model="areaName" input-align='right' type="select" @click='goSelect' placeholder="开户地区" />
			</u-form-item>

		</u-form>
		<view class="box_btn">
			<view class="flex_1 u-m-r-10">
				<u-button type="primary" @click="onPreviousStep">上一步</u-button>
			</view>
			<view class="flex_1 u-m-l-10" v-if="sumbitShow">
				<u-button type="success" @click="onSubmit">提交申请</u-button>
			</view>
		</view>
		<addressSelect ref='addressSelectRef' @callback='onAddressCallback' />
		<u-select v-model="bankShow" :list="bankList" @confirm='onBankShowConfirm'></u-select>
	</view>
</template>

<script>
	import weChatMxins from '../../mxins/index.js'
	import addressSelect from '../../../components/addressSelect.vue'
	export default {
		components: {
			addressSelect
		},
		mixins: [weChatMxins],
		data() {
			return {
				dataForm: {
					bank_account_type: 'BANK_ACCOUNT_TYPE_CORPORATE', //账户类型
					account_name: '', //开户名称
					account_bank: '', //开户银行
					bank_address_code: '', //开户银行省市编码
					bank_name: '', //开户银行全称（含支行）
					account_number: '', //银行账号
				},
				areaName: '',
				bankShow: false,
				bankList: [{
						label: '工商银行',
						value: 0,
					},
					{
						label: '交通银行',
						value: 1,
					},
					{
						label: '招商银行',
						value: 2,
					},
					{
						label: '民生银行',
						value: 3,
					},
					{
						label: '中信银行',
						value: 4,
					},
					{
						label: '浦发银行',
						value: 5,
					},
					{
						label: '兴业银行',
						value: 6,
					},
					{
						label: '光大银行',
						value: 7,
					},
					{
						label: '广发银行',
						value: 8,
					},
					{
						label: '平安银行',
						value: 9,
					},
					{
						label: '北京银行',
						value: 9.2,
					},
					{
						label: '华夏银行',
						value: 10,
					},
					{
						label: '农业银行',
						value: 11,
					},
					{
						label: '建设银行',
						value: 12,
					},
					{
						label: '邮政储蓄银行',
						value: 13,
					},
					{
						label: '中国银行',
						value: 14,
					},
					{
						label: '宁波银行',
						value: 15,
					},
					{
						label: '其他银行',
						value: 16,
					},
				],
				radioList: [{
						name: '对公账户',
						value: 'BANK_ACCOUNT_TYPE_CORPORATE',
						disabled: false
					},
					{
						name: '经营者个人',
						value: 'BANK_ACCOUNT_TYPE_PERSONAL',
						disabled: false
					},
				],
				rules: {
					account_name: {
						required: true,
						message: '请输入开户名称',
						trigger: 'blur',
					},
					bank_account_type: {
						required: true,
						message: '请选择账户类型',
						trigger: 'change',
					},

					account_bank: {
						required: true,
						message: '请输入开户银行',
						trigger: 'change',
					},
					account_number: {
						required: true,
						message: '请输入银行账号',
						trigger: 'blur',
					},
					bank_address_code: {
						required: true,
						message: '请选择银行所在地区',
						trigger: 'change',
					},
				}
			};
		},

		methods: {
			onSubmit() {

				this.$refs.uForm.validate(valid => {
					if (!valid) return
					if (this.dataForm.account_bank == '其他银行') this.dataForm.bank_name = ''
					this.$emit('sumbit')

				});
			},

			onBankShowConfirm(val) {
				this.dataForm.account_bank = val[0].label
			},
			onPreviousStep() {
				this.$emit('stepsCallback', 1)
			},

			onAddressCallback(val) {
				let {
					city,
					province,
					region
				} = val
				this.areaName = `${province.label}-${city.label}-${region.label}`
				this.dataForm.bank_address_code = city.value
			},


		}
	};
</script>

<style lang="scss" scoped>
	.accountInfo {
		padding: 0 35rpx 35rpx;
		background-color: #ffffff;
		margin-top: 50rpx;
	}

	.flex_1 {
		flex: 1;
	}

	.box_btn {
		justify-content: center;
		display: flex;
	}
</style>
